<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	* { margin: 0; padding: 0; list-style: none; }
	.big-icon{ width: 998px; height: 370px; border: 1px solid #000000; margin: 100px auto; position: relative; padding: 40px 20px; border-radius: 15px; overflow: hidden;}
	.big-icon .con { width: 998px; height: 370px; border: 1px solid gold; overflow:hidden; }
	.big-icon .con ul { width: 1100px; margin: 0 0 0 -1px; }
	.big-icon .con ul li { float: left; width: 199px; border-left: 1px solid gold; }
	.big-icon .closed{ width: 46px; height: 30px; background: rgba(0,0,0,0.5); position: absolute; right: 0; top: 0; color: white; text-align: center; line-height: 30px; border-bottom-left-radius: 15px; cursor: pointer;}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.con ul li').mouseover(function(e) {
            $(this).stop().animate({'width':'400px'},500).siblings().stop().animate({'width':'150px'},500);
        }).mouseout(function(e) {
            //控制所有的li都恢复到199px的宽度（动画效果）
			$('.con ul li').stop().animate({'width':'199px'},500);
        });
        
        	$('.closed').click(function(){
        		
        		$('.big-icon').hide(500);
        	})
	})
	
</script>
	</head>
	<body>
		<div class="big-icon">
			<div class="con">
		    	<ul>
		        	<li><img src="img/Icon1.jpg" width="400" height="370"></li>
		        	<li><img src="img/Icon-2.jpg" width="400" height="370"></li>
		        	<li><img src="img/Icon-3.jpg" width="400" height="370"></li>
		        	<li><img src="img/Icon-4.jpg" width="400" height="370"></li>
		        	<li><img src="img/Icon-5.jpg" width="400" height="370"></li>
		        </ul>
        	</div>
        	<div class="closed">关闭</div>
    	</div>
	</body>
</html>
